<template>
  <div>
    <input
      ref="excel-upload-input"
      class="excel-upload-input"
      type="file"
      multiple="multiple"
      :accept="accept"
      @change="handleClick"
    >
    <el-button style="height: 100%;" type="primary" @click="handleUpload">
      <svg-icon style="margin-right: 5px;" icon-class="ic_shangchuan" />
      <slot></slot>
    </el-button>
  </div>
</template>

<script>
export default {
  props: {
    accept: String,
    onSuccess: Function
  },
  methods: {
    handleUpload() {
      this.$refs["excel-upload-input"].click();
    },
    handleClick(e) {
      const files = e.target.files;
      if (!files) return;
      this.upload(files);
    },
    upload(files) {
      var formData = new FormData();
      for (let i = 0; i < files.length; i++) {
        let file = files[i];
        formData.append(`files`, file)
      }
      this.$refs["excel-upload-input"].value = null;
      this.onSuccess && this.onSuccess(formData)
      // if (!this.isExcel(rawFile)) {
      //   this.$message.error("仅支持上传.xlsx、.xls后缀文件");
      //   return false;
      // }
    },
    isExcel(file) {
      return /\.(xlsx|xls|csv)$/.test(file.name);
    }
  }
};
</script>

<style scoped>
.excel-upload-input {
  display: none;
  z-index: -9999;
}
</style>
